<template>
	<view class="swiper-container">
		<swiper class="swiper-box" :class="{ odd: odd }" :previous-margin="previousMargin" :next-margin="nextMargin" circular autoplay @change="swiperChange">
			<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="index">
				<slot name="image">
					<image
						@click="clickImg(item)"
						:class="currentIndex == index ? 'item-img' : 'item-img-side'"
						:src="item[urlKey]"
						lazy-load
						:style="dontFirstAnimation ? 'animation: none;' : ''"
						mode="aspectFill"
					></image>
				</slot>
				<slot>
					<view v-if="item[labelKey]" class="item-text">{{ item[labelKey] }}</view>
				</slot>
			</swiper-item>
		</swiper>
		<view v-if="indicatorDots" class="banner-dots flex_c abs"><view class="dot" :class="{ active: currentIndex == i }" v-for="(item, i) in imgList" :key="i"></view></view>
	</view>
</template>
<script>
export default {
	props: {
		imgList: {
			type: Array,
			default() {
				return [];
			}
		},
		urlKey: {
			type: String,
			default() {
				return 'url';
			}
		},
		labelKey: {
			type: String,
			default() {
				return 'label';
			}
		},
		indicatorDots: {
			type: Boolean,
			default: true
		},
		odd: { type: Boolean, default: false }
	},
	watch: {
		odd: {
			handler(val) {
				if (val) {
					this.previousMargin = '0rpx';
					this.nextMargin = '0rpx';
				}
			},
			immediate: true
		}
	},
	data() {
		return {
			previousMargin: '120rpx',
			nextMargin: '120rpx',
			currentIndex: 0,
			dontFirstAnimation: true
		};
	},
	methods: {
		swiperChange(e) {
			this.dontFirstAnimation = false;
			this.currentIndex = e.detail.current;
		},
		clickImg(item) {
			this.$emit('selected', item, this.currentIndex);
		}
	}
};
</script>
<style scoped lang="less">
.swiper-container {
	.swiper-box {
		width: 750rpx;
		height: 208rpx;
		position: relative;

		.item-img {
			width: 630rpx;
			height: 208rpx;
			border-radius: 20rpx;
			overflow: hidden;
			animation: to-big 0.5s;
		}

		.item-text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			text-align: center;
			background: rgba(255, 255, 255, 0.6);
			font-size: 24rpx;
			font-weight: 300;
			color: rgba(102, 100, 93, 1);
			line-height: 40rpx;
		}

		.swiper-item {
			width: 480rpx;
			height: 300rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.item-img-side {
			width: 480rpx;
			height: 104rpx;
			border-radius: 20rpx;
			animation: to-mini 0.5s;
		}

		.swiper-item-side {
			width: 480rpx;
			height: 104rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		&.odd {
			width: 694rpx;
			height: 290rpx;
			border-radius: 20rpx;
			.item-img {
				width: 694rpx;
				height: 290rpx;
				animation: unset;
				border-radius: 20rpx;
			}

			.swiper-item {
				width: 694rpx;
				height: 290rpx;
			}
			.item-img-side {
				width: 694rpx;
				height: 290rpx;
				animation: unset;
			}

			.swiper-item-side {
				width: 694rpx;
				height: 290rpx;
			}
		}
	}
	.banner-dots {
		margin-top: 24rpx;
		width: 100%;
		height: 8rpx;
		display: flex;
		justify-content: center;
		align-content: center;

		.dot {
			width: 30rpx;
			height: 8rpx;
			margin: 0 6rpx;
			border-radius: 8rpx;
			background: rgba(138, 140, 141, 0.2);
			&.active {
				width: 15px;
				background: rgba(138, 140, 141, 1);
			}
			&:first-child {
				margin-left: 0;
			}
			&:last-child {
				margin-right: 0;
			}
		}
	}
}

@keyframes to-mini {
	from {
		height: 208rpx;
	}
	to {
		height: 104rpx;
	}
}
@keyframes to-big {
	from {
		height: 104rpx;
	}
	to {
		height: 208rpx;
	}
}
</style>
